<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax练习</title>
	<style>
		#result{
			border:1px solid green;
			width:300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<button>获取JSON数据</button>
	<button>获取XML数据</button>
	<div id="result"></div>
</body>
<script>
	const btns = document.querySelectorAll("button");
	const result = document.querySelector("#result");
	btns[0].onclick = function(){
		result.innerHTML = "<h3>数据正在拼命加载中……</h3>"
		// 1- 生成xhr实例
		const xhr = new XMLHttpRequest();
		// responseType的初始值为空字符串，空字符串指定的响应体中的数据格式为文本
		// xhr.responseType = "text";// 设置响应体的格式为文本
		xhr.responseType = "json";// 设置响应体的格式为JSON
		// 2- 准备：配置请求方式以及请求地址
		xhr.open("get","/myJson");
		// 3- 发送
		xhr.send();
		// 4- 获取响应体
		xhr.onload = function(){
			// 响应体的格式 xhr.responseType的值是可以设置的，初始值是空字符串
			console.log("responseType:",xhr.responseType);
			// 响应体：当xhr.responseType为空字符串或text时，xhr.response是文本
			// 响应体：当xhr.responseType为json时，xhr.response是json对象
			console.log("response:",xhr.response);
			result.innerHTML = (`
				<div>
					<p>用户名:${xhr.response.userName}</p>
					<p>年龄:${xhr.response.age}</p>
				</div>
			`)
			// 响应体：如果响应体的格式是字符，那么可以使用该属性,当xhr.reposnsetype为空字符串或text的时候使用。
			// console.log("responseText:",xhr.responseText);// 字符串
		}
		
	}
	btns[1].onclick = function(){
		const xhr = new XMLHttpRequest();
		// xhr.responseType = ""// 相当于text
		// xhr.responseType = "text"
		xhr.responseType = "document";
		xhr.open("get","/myXml");
		xhr.send();
		xhr.onload = function(){
			// 得到响应体
			// console.log("response",xhr.response);
			// console.log("responseText",xhr.responseText);
			// console.log("responseText",xhr.responseXML);
			
			// console.log(xhr.response.querySelector("userName").innerHTML)
			// console.log(xhr.response.querySelector("age").innerHTML)
			
			result.innerHTML = (`
				<div>
					<p>用户名：${xhr.response.querySelector("userName").innerHTML}</p>
					<p>年龄：${xhr.response.querySelector("age").innerHTML}</p>
				</div>
			`)
		}
	}
</script>
</html>